<!DOCTYPE html>
<!-- Tpv zhongxiang.huang 20180103, modify GUI -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <title>[[#{meeting.invitation}]]</title>
    <link rel="shortcut icon" type="image/png" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/css/app.css(t=${version})}" type="text/css">
    <!-- animate -->
    <link rel="stylesheet" th:href="@{/css/animate/animate.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/tpv/style.css(t=${version})}">
	<!-- add version by zhongxiang.huang 2018.12.29 -->
    <link rel="stylesheet" th:href="@{/css/tpv/meeting.css(t=${version})}">

     <script data-th-inline="javascript">
         var LANGUAGE_CODE = [[#{language}]];
     </script>

     <script th:src="@{/js/tether/tether.min.js}"></script>
     <script th:src="@{/js/jquery.min.js}"></script>
     <script th:src="@{/js/jquery.i18n/jquery.i18n.properties.js}"></script>
     <script th:src="@{/js/jquery.i18n/languages.config.js}"></script>
     <script th:src="@{/js/bootstrap-notify/bootstrap-notify.min.js}"></script>
     <script th:src="@{/js/common.js(t=${version})}"></script>
</head>
<body>
	<div class="tpv-modal" style="text-align: center; width: 1000px; height: 650px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
		<div class="tpv-modal-dialog-lg">
			<div class="modal-content">
				<div style="background: #337ab7; padding: 10px 30px; border-top-left-radius: 4px; border-top-right-radius: 4px;text-align: center;">
					<h3 style="color: #fff; font-size: 24px;" >[[#{meeting.invitation}]]</h3><!-- '会议邀请: '+${detail.topic} -->
				</div>
				 <div class="modal-body" >
	                <div class="row">
	                 	<div class="col-lg-12" style="height:100px;text-align:center;margin: 10px">
				            <img style="height:100px" src="/img/tpv/login/login_tpv_logo.png"/>
				        </div>
				        <div class="col-lg-12 tpv-span-font" style="text-align:center;font-size:24px; margin: 10px;padding-right: 30px">
				            <span>[[#{meeting.detail}]]</span>
				        </div> 
	                    <div class="col-sm-6" >
		                    <div class="input-group row tpv-span-font" style="font-size:24px;margin-bottom: 20px;margin-top: 0px">
				                 <span >[[#{meeting.info}]]</span>
				            </div>
				            <div class="input-group row tpv-span-font">
				                <span >[[#{meeting.sponsor}]]：</span>
				                <span data-th-text="${detail.username}" class="tpv-single-line"></span>
				            </div>
				            <div class="input-group row tpv-span-font">
				                <span >[[#{meeting.topic}]]：</span>
				                <span data-th-text="${detail.topic}" class="tpv-single-line"></span>
				            </div>
				            <div class="input-group row tpv-span-font">
				                <span >[[#{meeting.time}]]：</span>
				                <span id="invite-meeting-time" data-th-start="${detail.start}" data-th-end="${detail.end}"></span>
				            </div>
				            <div class="input-group row tpv-span-font">
				                <span >[[#{meeting.content}]]：</span>
				                <span id="meeting-content" data-th-text="${detail.content}" class="tpv-multi-line"></span><!-- data-th-text="${detail.content}" -->
				            </div>
	                    </div>
	                     
	                    <HR style="height: 360px; width: 1px;margin-right: 16px" align="center" color="#B8BFD8" SIZE="1">
	                        	<!-- <div style="height: 360px; width: 1px;background-color:#B8BFD8;"></div> -->
	                     
	                    <div class="col-sm-5" >
	                       	<div class="input-group row tpv-span-font" style="font-size: 24px;margin-bottom: 20px;margin-top: 0px">
				               	<span >[[#{meeting.join.info}]]</span>
				           	</div>
				           	<div class="input-group row tpv-span-font">
				               	<span >[[#{meeting.id}]]：</span>
				               	<span data-th-text="${detail.meetingId}"></span>
				           	</div>
				          	<div class="input-group row tpv-span-font">
				               	<span >[[#{meeting.password}]]：</span>
				              	<span data-th-text="${detail.password}"></span>
				         	</div>
					        <div class="input-group row tpv-span-font">
					            <span >[[#{meeting.link}]]：</span>
					            <a id="a-meeting-link" style="color: #337ab7" data-th-text="${detail.url}" target="view_window"></a>
					        </div>
					        <div class="input-group row tpv-span-font">
					            <span >[[#{meeting.qrcode}]]：</span>
					            <img id="meeting-detail-qrcode" style="width: 168px;height: 168px" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/>
					        </div>
				       	</div>
	                </div>
	                <div style="text-align: center;padding-top: 20px;padding-bottom: 20px">
		                <a target="_blank" data-th-href="${detail.url}" class="btn tpv-btn-primary btn-lg" style="width: 188px; height: 42px;" data-th-title="#{meeting.join}" data-th-text="#{meeting.join}"></a>
		            </div>
	             </div>
			</div>
		</div>
	</div>	
	
</body>
<script type="text/javascript">
	$(document).ready(function(){
		 var content = $("#meeting-content");
         var meetingContent = content.text();
         var re = new RegExp("\n", "g");
         content.empty();
         content.html(meetingContent.replace(re, "<br/>")).show(); 
         
         var meetingTime = $("#invite-meeting-time");
         meetingTime.empty();
         meetingTime.append($MB.formatDate(parseInt(meetingTime.attr('start')), parseInt(meetingTime.attr('end'))));
         
         var meetingLink = $("#a-meeting-link");
         meetingLink.attr('href', meetingLink.text());
	});
</script> 
</html>